<script setup lang="ts">
import * as echarts from 'echarts'
import {onMounted, ref} from 'vue'
import {ECharts, EChartsOption} from "echarts";
import {getAqiTrendStatisticsApi} from "@/api/chartApis.ts";

const initData = async (chartDom: any) => {
  let data = []
  let res = await getAqiTrendStatisticsApi()
  if (res?.data.code == 200){
    let result = res.data.data
    for (let i = 0; i < result.length; i++){
      data.push(result[i].aqiExceedNum)
    }
  }
  let option: EChartsOption;
  option = {
    title: {
      text: '12个月内空气质量超标趋势',
      top: '10%',
      left: 'center',
      textStyle: {
        color: '#ffffff', // 这里设置标题的字体颜色
        fontSize: 12
      }
    },
    tooltip: {
      trigger: 'axis'
    },
    grid: {
      top: '20%',
      bottom: '10%',
    },
    xAxis: {
      type: 'category',
      boundaryGap: false,
      data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'],
      axisLabel: {
        color: '#ffffff', // 这里设置x轴标签的字体颜色
        fontSize: 10
      }
    },
    yAxis: {
      type: 'value',
      axisLabel: {
        color: '#ffffff', // 这里设置y轴标签的字体颜色
        fontSize: 10
      }
    },
    series: [
      {
        data: [...data],
        type: 'line',
        smooth: true,
        areaStyle: {},
        lineStyle: {
          color: '#779afd' // 这里设置线的颜色
        },
      }
    ]
  };
  chartDom.setOption(option)

}

const aqiTrend = ref()


onMounted(()=>{
  let chartDom = echarts.init(aqiTrend.value)
  initData(chartDom)
})


</script>

<template>
<div ref="aqiTrend" style="width: 100%; height: 30%"></div>
</template>

<style scoped>

</style>
